<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message" placeholder="edit me">
    <p>Message is {{ message }}</p>

    <textarea v-model="message2" aria-placeholder="add multiple lines"></textarea>
    <p style="white-space: pre-line">{{ message2 }}</p>

    <div style="margin-top: 20px">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="join" value="join" v-model="checkedNames">
        <label for="join">join</label>
        <input type="checkbox" id="mike" value="mike" v-model="checkedNames">
        <label for="mike">mike</label>
        <br>
        <span>checkedNames :{{ checkedNames }}</span>
    </div>

    <div style="margin-top: 20px">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">one</label>
        <br>
        <input type="radio" id="two" value="two" v-model="picked">
        <label for="two">two</label>
        <br>
        <span>Picked :{{picked}}</span>
    </div>
    <button @click="submit">Submit</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "",
            message2: "",
            checkedNames: [],
            picked:""
        },
        methods:{
            submit:function (){
                console.log(this.message)
                console.log(this.checkedNames)
                console.log(this.picked)
            }
        }
    })
</script>
</body>
</html>